<%@ taglib prefix="s" uri="/struts-tags" %>
<%--
  Created by IntelliJ IDEA.
  User: 高金磊
  Date: 2021/4/28
  Time: 17:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="<%=basePath%>favicon.ico" type="image/ico">
    <link href="<%=basePath%>css/style.css" rel="stylesheet">
    <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basePath%>css/theme.css" rel="stylesheet">
    <link href="<%=basePath%>css/fonts.css" rel="stylesheet">
    <script src="<%=basePath%>js/jquery.min.js"></script>
    <script src="<%=basePath%>js/bootstrap.js"></script>
    <script src="<%=basePath%>js/jquery.cookie.js"></script>
    <script src="<%=basePath%>js/framework.js"></script>
</head>

<body>
<s:action name="Home">


<!--页面主要内容-->
<main class="ftdms-layout-content">

    <div class="container-fluid" style="margin-bottom:90px;">

        <div class="row" style="margin-top:15px;">
            <div class="col-sm-6 col-lg-3">
                <div class="card bg-primary">
                    <div class="card-body clearfix">
                        <div class="pull-left">
                            <p class="h6 text-white m-t-0">今日访客</p>
                            <p class="h3 text-white m-b-0"><s:property value="#request.visernum[visernum.length-1]"/> </p>
                        </div>
                        <div class="pull-right"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="ftsucai-56 fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-danger">
                    <div class="card-body clearfix">
                        <div class="pull-left">
                            <p class="h6 text-white m-t-0">用户总数</p>
                            <p class="h3 text-white m-b-0"><s:property value="#request.UserNum"/></p>
                        </div>
                        <div class="pull-right"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="ftsucai-310 fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-success">
                    <div class="card-body clearfix">
                        <div class="pull-left">
                            <p class="h6 text-white m-t-0">今日待还书籍</p>
                            <p class="h3 text-white m-b-0"><s:property value="#request.tadayReturnOrderNum"/></p>
                        </div>
                        <div class="pull-right"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="ftsucai-55 fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-lg-3">
                <div class="card bg-purple">
                    <div class="card-body clearfix">
                        <div class="pull-left">
                            <p class="h6 text-white m-t-0">今日订单数量</p>
                            <p class="h3 text-white m-b-0"><s:property value="#request.tadayOrderNum"/></p>
                        </div>
                        <div class="pull-right"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="ftsucai-310 fa-1-5x"></i></span> </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h4>近7天访客数量与订单数量</h4>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-bars"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h4>用户和图书数量变化</h4>
                    </div>
                    <div class="card-body">
                        <canvas class="js-chartjs-lines"></canvas>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-12" >
                <div class="card" >
                    <div class="card-header">
                        <h4>最近30天评论数量与访客数量关系图</h4>
                    </div>
                    <div class="card-body" >
                        <canvas height="100" class="chartjs-lines"></canvas>
                    </div>
                </div>
            </div>

        </div>

        <div class="row">

            <div class="col-lg-12">
                <div class="card">
                    <h4>订单动态(最近10条)</h4>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>用户名</th>
                                    <th>图书名称</th>
                                    <th>下单日期</th>
                                    <th>借阅天数</th>
                                    <th>状态</th>
                                    <th>订单情况</th>
                                </tr>
                                </thead>
                                <tbody>
                                <s:iterator value="#request.loanBookLogRecords" var="data">


                                <tr>
                                    <td><s:property value="#data[0]"/> </td>
                                    <td><a class="submenuitem" href="" data-id="link552" data-index="552"><s:property value="#data[1]"/> </a></td>
                                    <td><s:property value="#data[2]"/> </td>
                                    <td><s:property value="#data[3]"/> </td>
                                    <td><s:property value="#data[4]"/> </td>
                                    <td><span class="label label-info"><s:property value="#data[5]"/> </span></td>
                                    <td>
                                        <div class="progress progress-striped progress-sm">
                                            <div class="progress-bar progress-bar-success" style="width: <s:property value="#data[6]"/>%;"></div>
                                        </div>
                                    </td>
                                </tr>
                                </s:iterator>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
<!--End 页面主要内容-->

<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="<%=basePath%>js/Chart.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
            $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
        $dashChartLines    = jQuery( '.chartjs-lines' )[0].getContext( '2d' );

        var $dashChartBarsData = {
            labels: ['', '', '', '', '', '', '今天'],
            datasets: [
                {
                    label: '近七天访客数量',
                    borderWidth: 1,
                    borderColor: '#DA212F',
                    backgroundColor: 'rgba(218,33,47, 1)',
                    fill:false,
                    data: [<s:property value="#request.visernum"/>]
                },
                {
                    label: '近七天订单数量',
                    borderWidth: 1,
                    borderColor: '#000000',
                    backgroundColor: '#000000',
                    fill:false,
                    data: [<s:property value="#request.ordernums"/>]
                }
            ]
        };
        var $dashChartLinesData = {
            labels: ['01', '02', '03', '04', '05', '06', '07'],
            datasets: [
                {
                    label: '新增用户数量',
                    borderWidth: 1,
                    borderColor: 'rgba(0,0,0,0)',
                    backgroundColor: 'rgba(72,116,207,0.7)',
                    hoverBackgroundColor: "rgba(72,176,247,1)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [<s:property value="#request.newUserNums"/>]
                },
                {
                    label: '新增图书数量',
                    borderWidth: 1,
                    borderColor: 'rgba(0,0,0,0)',
                    backgroundColor: 'rgba(170,221,255,0.7)',
                    hoverBackgroundColor: "rgba(170,221,255,1)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [<s:property value="#request.newBookNums"/>]
                }
            ]
        };

        var $ChartLinesData = {
            labels: [<s:property value="#request._date"/>],
            backgroundColor: ['rgba(255, 0, 0, 0.2)'],
            datasets: [
                {
                    label: '访客数量',
                    data: [<s:property value="#request.visernum_moth"/>],
                    borderWidth: 1,
                    borderColor: '#28da10',
                    backgroundColor: '#24bb10',
                    fill:false
                },{
                    label: '新增评论数量',
                    data: [<s:property value="#request.newCommentNums"/>],
                    borderWidth: 1,
                    borderColor: '#ff662a',
                    backgroundColor: '#DA212F',
                    fill:false
                }
            ]
        };

        new Chart($dashChartBarsCnt, {
            type: 'line',
            data: $dashChartBarsData
        });



        new Chart($dashChartLines, {
            type: 'line',
            data: $ChartLinesData
        });
        var myLineChart = new Chart($dashChartLinesCnt, {
            type: 'bar',
            data: $dashChartLinesData,
        });

    });
</script>
</s:action>
</body>
</html>